<template>
  <div class="home">
    <el-container class="layout-container-demo" style="height: 650px">
      <el-aside width="auto">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          text-color="#fff"
          active-text-color="#ffd04b"
          background-color="#545c64"
          @click="Click(item)"
          router
        >
          <el-menu-item index="/doctor">
            <el-icon><User /></el-icon>
            <template #title>医生管理</template>
          </el-menu-item>

          <!-- <el-menu-item index="/user">
            <el-icon><PieChart /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item> -->

          <el-menu-item index="/site">
            <el-icon><Menu /></el-icon>
            <template #title>站点管理</template>
          </el-menu-item>

          <el-menu-item index="/record">
            <el-icon><PriceTag /></el-icon>
            <template #title>患者档案</template>
          </el-menu-item>

          <el-menu-item index="/message">
            <el-icon><ChatDotRound /></el-icon>
            <template #title>信息咨询</template>
          </el-menu-item>

          <el-menu-item index="/echarts">
            <el-icon><StarFilled /></el-icon>
            <template #title>数据分析</template>
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>其他</span>
            </template>

            <el-menu-item index="/notice">系统公告</el-menu-item>
            <el-menu-item index="/maintain">系统维护</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <h2 class="titleH">防疫医疗服务站系统后台</h2>
          <el-radio-group
            v-model="isCollapse"
            collapse-transition="true"
            style="margin-bottom: 20px"
          >
            <el-button @click="handleMenu"><el-icon><Grid /></el-icon></el-button>
          </el-radio-group>
          <div class="toolbar">
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <img src="../../assets/header.webp" alt="">
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>{{ realName }}</el-dropdown-item>
                  <el-dropdown-item @click="goEach">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="removeT">退 出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-main class="viewmain">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import 
export default {
  name: "Home",
  data() {
    return {
    };
  },
  methods: {
    goEach(){
      this.$router.push('/personal')
    },
    handleClick() {},
    Click() {},
    handleMenu(){
      this.$store.commit('collapseMenu')
    },
    removeT() {
      sessionStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      this.$router.push('/login')
    }
  },
  computed:{
    isCollapse(){
      return this.$store.state.tab.isCollapse
    },
    realName() {
      console.log(this.$store.getters)
    }
  },
};
</script>

<style lang="less">
.home{
  height: 100%;
  width: 100%;
}
.el-container{
  height: 100vh;
}
.viewmain{
  height: 100%;
}
.layout-container-demo .el-header {
  position: relative;
  background: #4c4d4d;
}
.el-aside {
  overflow: hidden;
  height: 100vh;
}
.titleH {
  position: absolute;
  left: 100px;
  color: #ffffff;
}
.el-radio-group {
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 2;
}

.layout-container-demo .el-menu {
  border-right: none;
  height: 100%;
}
.el-dropdown-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.el-dropdown-link img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.layout-container-demo .el-main {
  padding: 15px;
  height: 95vh;
  position: relative;
  /* background: #f0f0f0f0; */
}
.el-scrollbar {
  height: 100%;
}
.el-table {
  height: 100%;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
